<template>
  <div class="hero-editor">
    <div class="title mask">
      <h2>驾驶员列表</h2>
      <div class="operate">
        <Button type="primary" @click="changeHeroList(page - 1)">上一页</Button>
        <span class="pl10 pr10">{{ page }} / {{ totalpage }}</span>
        <Button type="primary" @click="changeHeroList(page + 1)">下一页</Button>
        <Button type="primary" size="large" title="新增">
          <i class="iconfont icon-add"></i>
        </Button>
        <Button type="primary" size="large" title="上传头像">
          <i class="iconfont icon-save"></i>
        </Button>
      </div>
      <div class="search pl10">
        <form action @submit="searchHero" class="flex flex-vcenter">
          <input type="text" v-model="searchValue" placeholder="搜索驾驶员名字" />
          <Button type="primary" size="large" @click="searchHero">
            <i class="iconfont icon-LC_icon_search_line_2"></i>
          </Button>
        </form>
      </div>
    </div>
    <div class="heros">
      <ScrollView>
        <div class="hero-list">
          <hero-item v-for="hero in heroList" :key="hero.id" :data="hero" />
        </div>
      </ScrollView>
    </div>
    <HeroHeadList
      v-if="avatars.length"
      :data="avatars"
      :current="curAvatar"
      @change="changeAvatar"
    />
  </div>
</template>
    
<script>
import { onMounted, reactive, toRefs, watch } from 'vue'
import HeroItem from '../../components/manager/people/HeroItem.vue'
import ScrollView from '../../components/common/ScrollView.vue'
import Button from '../../components/common/Button.vue'
import HeroHeadList from '../../components/manager/people/HeroHeadList.vue'

import axios from '../../lib/request.js'

export default {
  components: { HeroItem, ScrollView, Button, HeroHeadList },
  setup(props, context) {

    const state = reactive({
      page: 1,
      heroList: [],
      avatars: [],
      curAvatar: {},
      total: 1,
      totalpage: 2,
      size: 21,
      searchValue: '',
      weapons: []
    })

    onMounted(async () => {
      await getAllPeopleAvatar()
      await getHeroData()
    })


    

    const changeHeroList = (num) => {
      if (num <= 0 || num > state.totalpage) return
      state.page = num
      getHeroData()
    }
    async function getHeroData() {
      const { data } = await axios.get('/people/getPersonByPage', { params: { size: state.size, page: state.page, search: state.searchValue } })
      state.heroList = data.data
      state.total = data.total
      state.totalpage = Math.ceil(state.total / state.size)
    }

    async function getAllPeopleAvatar() {
      const { data } = await axios.get('/people/getAllPeopleAvatar')
      state.avatars.push(...data.data)
      state.curAvatar = state.avatars[0]
    }

    const changeAvatar = (av) => {
      state.curAvatar = av
      console.log(av);
    }

    const searchHero = (event) => {
      event.preventDefault()
      state.page = 1
      getHeroData()
    }
    return {
      ...toRefs(state),
      changeHeroList,
      changeAvatar,
      searchHero
    }
  }
}
</script>
<style lang="less" scoped>
@import "../../theme.less";
.hero-editor {
  flex-direction: column;
  height: 100vh;
  .title {
    height: 100px;
    padding: 20px;
    border-bottom: 1px solid @theme-line;
    display: flex;
    .operate {
      padding-left: 20px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
  }
  .heros {
    height: calc(100vh - 100px);
    .hero-list {
      display: flex;
      flex-wrap: wrap;
    }
    .hero-item {
      margin-bottom: 10px;
      margin-right: 10px;
    }
  }
}
</style>